<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="java.util.List"%>
<%@page import="com.qdu.entity.Book"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh" class="no-js">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<base href="${pageContext.request.contextPath}/" />
	<link rel="stylesheet" type="text/css" href="static/css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="static/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
	<link rel="stylesheet" type="text/css" href="static/css/demo.css" />
	<link rel="stylesheet" type="text/css" href="static/css/component.css" />

	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/profile.css" />
	<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />

	<script src="js/jquery-3.4.1.min.js"></script>
	<script src="js/jquery-3.5.0.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/script.js" charset="UTF-8"></script>
	<script src="js/cityAndPro.js"></script>
	<script src="js/bootstrap-datetimepicker.min.js"></script>
	<title>个人信息</title>
	<!--[if IE]>
  		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
		<![endif]-->
</head>

<body style="background-color: white; ">

	<section class="content">
		<form>
			<span class="input input--kaede" style="background-color: white;">
                            <input  value="${user.getUname()}" class="input__field input__field--hoshi" type="text" id="input-4"  readonly unselectable="on"/>
				<label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-4">
					<span class="input__label-content input__label-content--hoshi"  style="padding: 0em 0;">用户名${username}</span>
				</label>
			</span>
			<span class="input input--kaede" style="background-color: white;">
				<input class="input__field input__field--hoshi" type="password" id="input-5"  />
				<label class="input__label input__label--hoshi input__label--hoshi-color-2" for="input-5">
					<span class="input__label-content input__label-content--hoshi"  style="padding: 0em 0;">密码</span>
				</label>
			</span>
			<span class="input input--kaede" style="background-color: white;">
				<input class="input__field input__field--hoshi" type="email" id="input-6" />
				<label class="input__label input__label--hoshi input__label--hoshi-color-3" for="input-6">
					<span class="input__label-content input__label-content--hoshi"  style="padding: 0em 0;">邮箱</span>
				</label>
			</span>
			<span class="input input--kaede" style="background-color: white;">
				<input class="input__field input__field--hoshi" type="number" id="input-7" />
				<label class="input__label input__label--hoshi input__label--hoshi-color-3" for="input-6">
					<span class="input__label-content input__label-content--hoshi"  style="padding: 0em 0;">手机号</span>
				</label>
			</span>
			<span class="input input--kaede" style="background-color: white;">
				<input class="input__field input__field--hoshi" type="date" id="input-8" />
				<label class="input__label input__label--hoshi input__label--hoshi-color-3" for="input-6">
					<span class="input__label-content input__label-content--hoshi"  style="padding: 0em 0;">生日</span>
				</label>
			</span>
			<div class="input input--kaede" style="background-color: white;">
				<label>所在地址</label>

				<select name="input_province" id="input_province" class="form-control" style="width: 220px;">
					<option value=" ">--请选择--</option>
				</select>
				<br />

				<select name="input_city" id="input_city" class="form-control" style="width: 220px;">
					<option value="">--请选择--</option>
				</select>


			</div>
			<div class="input input--kaede" style="background-color: white;">
				<label><input name="Fruit" type="radio" value="man" />男 </label>
				<label><input name="Fruit" type="radio" value="woman" />女 </label>
			</div>

			<span class="input input--kaede" style="background-color: white;">
				<button type="submit" class="btn btn-default">保存并提交</button>
			</span>
		</form>

	</section>

	</div><!-- /container -->
	<script src="js/classie.js"></script>
	<script>
		window.onload = function () {
			var inpEle = document.getElementById('input-7');
			var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
			inpEle.onblur = function () {
				var inpVal = this.value;
				if (!myreg.exec(inpVal)) {
					alert('请输自入正确的手机号')
					document.getElementById('inp').value = ""
				}
			}

		}
		// (function () {
		// 	// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
		// 	if (!String.prototype.trim) {
		// 		(function () {
		// 			// Make sure we trim BOM and NBSP
		// 			var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
		// 			String.prototype.trim = function () {
		// 				return this.replace(rtrim, '');
		// 			};
		// 		})();
		// 	}

		// 	[].slice.call(document.querySelectorAll('input.input__field')).forEach(function (inputEl) {
		// 		// in case the input is already filled..
		// 		if (inputEl.value.trim() !== '') {
		// 			classie.add(inputEl.parentNode, 'input--filled');
		// 		}

		// 		// events:
		// 		inputEl.addEventListener('focus', onInputFocus);
		// 		inputEl.addEventListener('blur', onInputBlur);
		// 	});

		// 	function onInputFocus(ev) {
		// 		classie.add(ev.target.parentNode, 'input--filled');
		// 	}

		// 	function onInputBlur(ev) {
		// 		if (ev.target.value.trim() === '') {
		// 			classie.remove(ev.target.parentNode, 'input--filled');
		// 		}
		// 	}

		// 	// -----------------------------------------------------------------------------------

		// })();

		$(function () {
			var html = "";
			var province_idx;
			$("#input_city").append(html);

			$.each(cityMessage, function (idx, item) {
				if (item.parid == '1') {
					html += "<option value='" + item.regname + "' exid='" + item.regid + "'>" + item.regname + "</option>";
				}

			});
			$("#input_province").append(html);
			$("#input_province").change(function (e) {
				var province = $(this).val();
				var cityList = [];
				if (province == "") return;
				$("#input_city option").remove();
				var html = "<option value=''>--请选择--</option>";

				//					获取已选择的省份的数组下标
				$.each(cityMessage, function (idx, item) {
					if (province == item.regname && item.parid == '1') {
						province_idx = idx
					}
				})

				//					获取已选择的省份的城市列表
				$.each(cityMessage, function (idx, item) {
					if (cityMessage[idx].parid == cityMessage[province_idx].regid) {
						cityList.push(cityMessage[idx])
					}
				})

				//					添加城市信息给标签
				if (cityList instanceof Array && cityList.length > 0) {
					$.each(cityList, function (idx, item) {
						console.log(item)
						html += "<option value='" + item.regname + "' exid='" + item.regid + "'>" + item.regname + "</option>";

					});
				} else {
					html += "<option value='" + cityMessage[province_idx].regname + "' exid='" + cityMessage[province_idx].regid + "'>" + cityMessage[province_idx].regname + "</option>";

				}
				$("#input_city").append(html);
			});
		});
	</script>
</body>

</html>